<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            margin:50px auto;
            width: 259px;
            height: 259px;
            overflow: hidden;
            border: 1px solid #000;
            position: relative;
        }
        ul{
            list-style: none;
            margin:0;
            padding: 0;
            /*margin-top: -259px;*/
        }
        li{
            width: 259px;
            height: 259px;
            overflow: hidden;
        }
        #circle{
            position: absolute;
            left: 20px;
            bottom: 10px;
        }
        #circle span{
            display: block;
            float: left;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            color: #fff;
            background: red;
            text-align: center;
            line-height: 20px;
            margin-right: 15px;
            cursor: pointer;
        }
        
    </style>
</head>
<body>
<div id="box">
    <div id="top">
        <ul>
            <li><img src="images/1.png" ></li>
            <li><img src="images/2.png" ></li>
            <li><img src="images/3.png" ></li>
            <li><img src="images/4.png" ></li>
            <li><img src="images/2.png" ></li>
        </ul>
    </div>
    <div id="circle"></div>
</div>
    <script src="兼容.js"></script>
    <script>
    var top = document.getElementById("top");
    var lis = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var circle = document.getElementById("circle");
    for(var i=0;i<lis.length;i++){//自动根据li的个数生成 圆形span
        var newspan = document.createElement("span");
        newspan.innerHTML = i+1;
        circle.appendChild(newspan) 
    }
    var spans = circle.children;

    for(var i=0;i<lis.length;i++){
        spans[i].index = i;//创建下标属性
        spans[i].onclick = function(){
            // this.style.background = "#ccc";
            ul.style.marginTop = -259*this.index+"px"
        }
    }
    </script>
</body>
</html>